<template>
  <header>
    <div class="l-content">
      <el-button
        type="primary"
        icon="el-icon-menu"
        size="mini"
        style="margin: 0px 15px 0px 0px"
      ></el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item ><span @click="to" class="el_breadcrumb_first">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item v-if="this.$route.meta.parentName">{{ this.$route.meta.parentName }}</el-breadcrumb-item>
        <el-breadcrumb-item >{{ this.$route.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown size="mini"  @command="commandHeader">
        <span class="el-dropdown-link">
          <img :src="userImg" class="userImg" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
          <el-dropdown-item command="sttting">设置</el-dropdown-item>
          <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    // ...mapState({
    //   current: (state) => state.tab.currentMenu,
    // }),
  },
  data() {
    return {
      userImg: require("../assets/images/01.jpg"),
      user: JSON.parse(window.sessionStorage.getItem("user")),
    };
  },
  methods: {
    commandHeader(cmd) {
      if (cmd == "logout") {
        this.$confirm("此操作将退出登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          console.log("1232");
            this.getRequset("/logout");
            window.sessionStorage.removeItem("user");
            this.$store.commit('initRoutes', []);
            this.$router.replace('/');
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
      }
    },
    to() {
      this.$router.push('/home');
      this.$store.commit("selectMemu", {path:'/home',name:'name',select:true});
    }
  },
};
</script>
<style>
header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 0px 15px;
  box-sizing: border-box; */
}
.l-content {
  /* width: 400px; */
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.userImg {
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.el-container {
  height: 50px;
}
.el_breadcrumb_first {
  font-weight: bolder;
   cursor:pointer;
}
</style>